<template>
	<view class="flex column aic">
		<!-- <iframe id="iframe" src="https://jj.1c3.com.cn/h5/h5.html#/" frameborder="0" width="440px" height="905px"></iframe> -->

		<vxe-toolbar :refresh="{ queryMethod: searchMethod }">
			<template #buttons>
				<vxe-button @click="expandAllTreeEvent">展开所有</vxe-button>
				<vxe-button @click="claseExpandTreeEvent">关闭所有展开</vxe-button>
			</template>
		</vxe-toolbar>
		<view class="" style="width: 1124px">
			<vxe-table
				ref="tableRef"
				border="full"
				sync-resize
				:loading="loading"
				keep-source
				max-height="500"
				:column-config="{ resizable: true }"
				:tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', expandAll: true, border: 'full' }"
				:data="tableData"
				:checkbox-config="{ labelField: 'name', highlight: true }"
				@checkbox-change="selectChangeEvent"
				@checkbox-all="selectChangeEvent"
			>
				<vxe-column type="checkbox" title="栏目" width="280" tree-node></vxe-column>
				<!-- <vxe-column field="name" title="页面"></vxe-column> -->
				<!-- <vxe-column field="qa" title="问题"></vxe-column> -->
				<vxe-column field="caozuo" title="操作" width="280">
					<template #default="{ row }">
						<view class="" v-if="row.caozuo == 0">
							<vxe-button type="text" @click="openModel(row, 1)">新增页面</vxe-button>
						</view>
						<view class="" v-if="row.caozuo == 1">
							<vxe-button type="text" @click="openModel(row, 2)">新增位置</vxe-button>
						</view>
						<view class="" v-if="row.caozuo == 2">
							<vxe-button type="text" @click="openModel(row, 3)">新增问题</vxe-button>
						</view>
						<view class="" v-if="row.caozuo == 3">
							<vxe-button type="text">查看问题</vxe-button>
							<vxe-button type="text" @click="openupDateModel(row, 0)" v-if="!inGman(row)">跟进</vxe-button>
							<vxe-button type="text" @click="openupDateModel(row, 1)" v-if="inGman(row)">转交</vxe-button>
							<vxe-button type="text" @click="openupDateModel(row, 2)" v-if="inGman(row)">协同</vxe-button>
							<vxe-button type="text" @click="openupDateModel(row, 3)" v-if="inGman(row)">完成</vxe-button>
						</view>
						<!-- <view class="" v-if="row.caozuo == 4">
							<vxe-button type="text" @click="openModel(row, 5)">回答</vxe-button>
						</view> -->
					</template>
				</vxe-column>
				<vxe-column field="fman" title="发起人"></vxe-column>
				<vxe-column field="gman" title="跟进人">
					<template #default="{ row }">
						<view class="flex column" v-for="i in row.gman">
							<view class="">
								<text v-if="i.position">{{ i.position }}:</text>
								{{ i.name }}
							</view>
						</view>
					</template>
				</vxe-column>
				<vxe-column field="state" title="状态">
					<template #default="{ row }">
						<view class="" v-if="row.states">
							{{ doIt(row.states) }}
						</view>
					</template>
				</vxe-column>
			</vxe-table>

			<!-- <vxe-pager	
				perfect
				:layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
				v-model:current-page="tablePage.currentPage"
				v-model:page-size="tablePage.pageSize"
				:total="tablePage.total"
				@page-change="handlePageChange"
			>
				<template #left>
					<view class="">
						<span class="page-left">
							<vxe-button size="small">
								<template #default>添加</template>
								<template #dropdowns>
									<vxe-button type="text">页面</vxe-button>
									<vxe-button type="text">问题</vxe-button>
								</template>
							</vxe-button>
							<vxe-button>修改</vxe-button>
							<vxe-button>跟进</vxe-button>
							<vxe-button>转交</vxe-button>
							<vxe-button>协同</vxe-button>
							<vxe-button>完成</vxe-button>
						</span>
					</view>
				</template>
			</vxe-pager> -->
		</view>
		<!-- 添加 -->
		<vxe-modal v-model="addModel" width="520" show-footer>
			<template #title>
				<span>新增</span>
			</template>
			<template #corner>
				<vxe-icon name="vxe-icon-close"></vxe-icon>
			</template>
			<template #default>
				<view class="inputGroup">
					<view v-if="addType == 0">
						<view>栏目名</view>
						<vxe-input v-model="team.lanName" placeholder="栏目名称"></vxe-input>
					</view>
					<view v-if="addType == 1">
						<view>页面名</view>
						<vxe-input v-model="team.pagename" placeholder="页面名称"></vxe-input>
					</view>
					<view v-if="addType == 2">
						<view>位置名</view>
						<vxe-input v-model="team.positionName" placeholder="位置名称"></vxe-input>
					</view>
				</view>
				<view class="qa">
					<view v-if="addType == 3">
						<view>问题</view>
						<vxe-textarea v-model="team.quesion" placeholder="问题" rows="7"></vxe-textarea>
					</view>
					<view v-if="addType == 4 || addType == 5">
						<view>回答</view>
						<vxe-textarea v-model="team.action" placeholder="回答" rows="7"></vxe-textarea>
					</view>
				</view>
			</template>
			<template #footer>
				<vxe-button status="primary" @click="confirmEvent">确定</vxe-button>
			</template>
		</vxe-modal>
		<!-- 修改 -->
		<vxe-modal v-model="updateModel" width="400" show-footer>
			<template #title>
				<span>修改</span>
			</template>
			<template #corner>
				<vxe-icon name="vxe-icon-close"></vxe-icon>
			</template>
			<template #default>
				<view class="">
					<view v-if="useType == 0">
						<view class="">您正在跟进{{ tool.name }}位置的信息</view>
					</view>
					<view v-else-if="useType == 3">
						<view class="">您完成了{{ tool.name }}位置</view>
					</view>
					<view class="" style="height: 260px" v-else>
						<view v-if="useType == 1" class="flex aic jcc">
							<view class="mgr20">转交</view>
							<!-- <vxe-input v-model="team.gman" placeholder="转交者"></vxe-input> -->
							<vxe-select v-model="team.gman" placeholder="  -------请选择-------">
								<vxe-option v-for="num in tgList" :key="num" :value="num" :label="`${num.position}-${num.name}`"></vxe-option>
							</vxe-select>
						</view>
						<view v-else class="flex aic jcc">
							<view class="mgr20">{{ useType == 1 ? '转交' : '协同' }}</view>
							<!-- <vxe-input v-model="team.gman" placeholder="转交者"></vxe-input> -->
							<vxe-select v-model="team.gman" placeholder="  -------请选择-------" multiple multi-char-overflow>
								<vxe-option v-for="num in tgList" :key="num" :value="num" :label="`${num.position}-${num.name}`"></vxe-option>
							</vxe-select>
						</view>
					</view>
				</view>
			</template>
			<template #footer>
				<vxe-button status="primary" @click="update">确定</vxe-button>
			</template>
		</vxe-modal>
	</view>
</template>

<script setup>
import { ref, reactive, computed, nextTick } from 'vue';
import { VXETable } from 'vxe-table';
const loading = ref(false);
let tableData = reactive([]);
const findList = () => {
	loading.value = true;
	return new Promise((resolve) => {
		setTimeout(() => {
			tableData = [
				{ id: 1, parentId: null, name: '栏目名字', caozuo: 0 },
				{ id: 2, parentId: 1, name: '页面名字', caozuo: 1 },
				{
					id: 3,
					parentId: 2,
					name: '位置名',
					caozuo: 2
				},
				{
					id: 4,
					parentId: 3,
					name: '问题:吃没吃',
					caozuo: 3,
					fman: '用户A',
					gman: [
						// { name: 'me', position: '前端' },
						{ name: '用户B', position: '前端' },
						{ name: '用户c', position: '前端' }
					],
					states: 10
				}
				// { id: 5, parentId: 4, name: '没', caozuo: 4, fman: '用户A', gman: '用户B' }
			];
			loading.value = false;
			resolve(null);
		}, 300);
	});
};
const searchMethod = () => {
	const $table = tableRef.value;
	if ($table) {
		// 清除所有状态
		$table.clearAll();
		return findList();
	}
	return Promise.resolve();
};
// 可以协同的角色
const tgList = [
	{ name: '啪啪啪', position: '后端' },
	{ name: '哦哦哦', position: '前端' },
	{ name: 'me', position: '前端' },
	{ name: '啦啦啦', position: 'UI' }
];
// 个人信息
let myInfo = { name: 'me', position: '前端' };

let inGman = computed(() => {
	return function (row) {
		if (row.gman) {
			return row.gman.filter((i) => JSON.stringify(i) === JSON.stringify(myInfo)).length > 0;
		} else {
			return;
		}
	};
});
let doIt = computed(() => {
	return function (states) {
		return states == 10 ? '未完成' : '完成';
	};
});
const tablePage = reactive({
	total: 0,
	currentPage: 1,
	pageSize: 10
});
const handlePageChange = ({ currentPage, pageSize }) => {
	tablePage.currentPage = currentPage;
	tablePage.pageSize = pageSize;
};
// 全选
const isAllChecked = ref(false);
const isIndeterminate = ref(false);
const selectRecords = ref([]);
const selectChangeEvent = () => {
	const $table = tableRef.value;
	if ($table) {
		isAllChecked.value = $table.isAllCheckboxChecked();
		isIndeterminate.value = $table.isAllCheckboxIndeterminate();
		selectRecords.value = $table.getCheckboxRecords();
	}
};

// 展开所有
const tableRef = ref();
function expandAllTreeEvent() {
	const $table = tableRef.value;
	if ($table) {
		$table.setAllTreeExpand(true);
	}
}
// 关闭所有
function claseExpandTreeEvent() {
	const $table = tableRef.value;
	if ($table) {
		$table.clearTreeExpand();
	}
}
//表单显示处理 0 新增栏目 1 新增页面 2 添加位置 3 添加问题 4回答楼主问题  5 追问
let addType = ref(0);
//当前选择单元格
let tool = reactive({});
//添加表单信息
let team = reactive({});
//弹框
let addModel = ref();
//问答弹框
let qaShow = ref();
//打开弹框
const openModel = (row, tip) => {
	tool = row;
	addType.value = tip;
	addModel.value = true;
};
//确定
const confirmEvent = async () => {
	addModel.value = false;
	addLine();
};
// 新增函数
async function addLine() {
	//表单显示处理 0 新增栏目 1 新增页面 2 添加位置 3 添加问题 4查看问题
	let upLoadData = [
		{
			name: '',
			id: tableData.length + 1,
			caozuo: addType.value,
			parentId: tool.id
		}
	];
	const $table = tableRef.value;
	if ($table) {
		switch (addType.value) {
			case 1:
				upLoadData[0].name = team.pagename;
				break;
			case 2:
				upLoadData[0].name = team.positionName;
				// upLoadData[0].fman = myInfo.name;
				break;
			case 3:
				upLoadData[0].id = tableData.length + 1;
				upLoadData[0].name = team.quesion;
				upLoadData[0].fman = myInfo.name;
				upLoadData[0].states = 10;
				break;
			case 4:
				qaShow = true;
				// upLoadData[0].name = team.action;
				// upLoadData[0].fman = myInfo.name;
				// upLoadData[0].gman = tool.fman;
				break;
			// case 5:
			// 	upLoadData[0].name = team.action;
			// 	upLoadData[0].parentId = tool.parentId;
			// 	upLoadData[0].fman = myInfo.name;
			// 	upLoadData[0].caozuo = addType.value - 1;
			// 	upLoadData[0].gman = tool.fman;
			// 	break;
		}
		const { row: newRow } = await $table.insertAt(upLoadData, -1);
		await $table.setTreeExpand(tool, true); // 将父节点展开
		await $table.setEditRow(newRow); // 插入子节点
		console.log(tableRef.value);
	}
	// tableData = [...tableData, ...upLoadData];
	// console.log(tableData);

	team = {};
}
//修改
//操作处理 0 跟进 1 转交 2 协同 3 完成
let useType = ref(0);
let updateModel = ref();
let showOp = computed(() => {
	return useType.value == 1 || useType.value == 2;
});
let openupDateModel = (row, tip) => {
	tool = row;
	useType.value = tip;
	updateModel.value = true;
};

function getInGman(row, people) {
	if (row.gman) {
		return row.gman.filter((i) => JSON.stringify(i) == JSON.stringify(people)).length > 0;
	} else {
		return;
	}
}
function update() {
	updateModel.value = false;
	switch (useType.value) {
		// 0 跟进 1 转交 2 协同 3 完成
		case 0:
			if (!tool.gman) {
				console.log(tableData, tool.id - 1);
				tableData[tool.id - 1].gman = [myInfo];
			} else {
				console.log(tableData[tool.id - 1].gman);
				if (tableData[tool.id - 1].gman) {
					tableData[tool.id - 1].gman.push(myInfo);
					selectChangeEvent();
				}
			}
			break;
		case 1:
			if (getInGman(tool, team.gman)) {
				uni.showToast({
					title: '该名同事已经跟进该位置!',
					icon: 'none'
				});
				return;
			} else {
				let old = tableData[tool.id - 1].gman;
				old.map((i, index) => {
					if (JSON.stringify(i) == JSON.stringify(myInfo)) {
						tableData[tool.id - 1].gman[index] = team.gman;
					}
				});
			}
			break;
		case 2:
			let flag = team.gman.some((i) => getInGman(tool, i));
			if (flag) {
				uni.showToast({
					title: '选项存在重复,请重试!',
					icon: 'none'
				});
			} else {
				tableData[tool.id - 1].gman = [...tableData[tool.id - 1].gman, ...team.gman];
			}
			break;
		case 3:
			tableData[tool.id - 1].states = 20;
			break;
	}
}
</script>

<style lang="scss">
.vxe-column {
	border: 1px solid red !important;
}
.inputGroup {
	display: flex;
	flex-direction: column;
	align-items: center;

	view {
		width: 300px;
		// border: 1px solid red;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		view {
			margin-right: 20rpx;
			width: 120rpx;
		}
	}
}
.qa {
	display: flex;
	flex-direction: column;
	view {
		margin-bottom: 20rpx;
	}
	// align-items: center;
}
</style>
